<template>
  <div class="user-container">
    <!-- 展示数据的表格 -->
      <div class="table">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        height="750"
        :cell-style="showColor">
        <el-table-column
          prop="id"
          label="编号"
          type="index"
          width="150"
          align="center">
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户名"
          align="center">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          align="center"
          :formatter="showStatus">
        </el-table-column>
        <el-table-column
          label="头像"
          align="center">
          <template slot-scope="scope">
            <img style="width:80px;height:80px" :src="scope.row.headImg" alt="">
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button @click="changeStatus(scope.row.id,scope.row.status)" type="primary" size="small" v-if="scope.row.status==0">冻 结</el-button>
            <el-button @click="changeStatus(scope.row.id,scope.row.status)" type="warning" size="small" v-if="scope.row.status==1">取消冻结</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getUserList,putStatus } from "../../api/admin/user.js";
export default {
  data() {
    return {
      tableData:[],
    }
  },
  methods: {
    init() {
      getUserList().then( (res) => {
        // console.log(res.data);
        this.tableData = res.data.data
      })
    },
    changeStatus(id,status) {
      if(status == 0) {
        status = 1
      }else {
        status = 0
      }
      putStatus(id,status).then(() => {
        this.init()
      })
    },
    showStatus(row) {
      if(row.status == 0){
        return '正常'
      }
      if(row.status == 1){
        return '已冻结'
      }
    },
    showColor(row){
      let cellBackground = {}
      if(row.columnIndex == 2) {
      if(row.row.status == 0){
        cellBackground.color = '#3498db'
      }
      if(row.row.status == 1) {
        cellBackground.color = '#e67e22'
      }
      }
      return cellBackground
    },
  },
  created() {
    this.init()
  }
}
</script>

<style>

</style>